<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>标注和标注图层-文字展示</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <style>
        html,
        body,
        #container {
            height: 100%;
            width: 100%;
            margin: 0;
        }

        .collision-btn.disable {
            background-image: none;
            color: lightgrey;
            border-color: lightgrey;
            cursor: not-allowed;
        }

        .collision-btn.disable:hover {
            background-color: #fff;
            border-color: lightgrey;
        }

        .input-card .btn {
            margin-right: .8rem;
        }

        .title {
            position: absolute;
            top: 0;
            left: 50%;
            padding: 0.5em 1em;
            height: auto;
            border-radius: 2px;
            font-weight: 500;
            font-size: 20px;
            width: 307px;
            margin-left: -153px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="container"></div>
    <div class="title" style="touch-action: none; color: rgb(255, 255, 255); background: rgba(0, 0, 0, 0.5); font-size:
16px; transform: translate(0px, 10px);">全国累计确诊病例分布<span style="font-size: 14px;">（截止 3月30日）</span></div>
    <script type="text/javascript"
        src="https://webapi.amap.com/maps?v=2.0&key=2117aeb766c99a2763b91b68ce2530e8"></script>
    <!-- <script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.15&key=2117aeb766c99a2763b91b68ce2530e8"></script> -->
    <script type="text/javascript"
        src="https://a.amap.com/jsapi_demos/static/demo-center-v2/mock_data/yiqing-data.js"></script>
    <script type="text/javascript"
        src="https://a.amap.com/jsapi_demos/static/demo-center-v2/mock_data/cities.js"></script>
    <script>
        var icon = {
            type: 'image',
            image: 'https://a.amap.com/jsapi_demos/static/demo-center/marker/express2.png',
            size: [64, 30],
            anchor: 'center',
        };
        var textStyle = {
            fontSize: 12,
            fontWeight: 'normal',
            fillColor: '#fff',
            padding: '2, 5',
            backgroundColor: 'rgb(246,137,38)',
            borderColor: '#fff',
            borderWidth: 1,
            borderRadius: '50%'
        };
        var LabelsData = [
            {
                name: '自提点1',
                position: [116.461009, 39.991443],
                zooms: [10, 20],
                opacity: 1,
                zIndex: 10,
                icon,
                text: {
                    content: '中邮速递易',
                    direction: 'right',
                    offset: [-20, -5],
                    style: textStyle
                }
            },
        ];
    </script>
    <script type="text/javascript">
        var map = new AMap.Map('container', {
            zoom: 4.5,
            center: [109.610747, 35.15261],
            viewMode: '3D',
            // pitch: 60,
            // mapStyle: 'amap://styles/whitesmoke',
            showIndoorMap: false,
            showLabel: false,
            // mapStyle: 'amap://styles/dark',
            mapStyle: 'amap://styles/fresh',
        });
        var bgImage = document.getElementById('bgImage');
        var bgCanvas;
        var bgCanvasCtx;

        var markers = [];
        var layer = new AMap.LabelsLayer({
            zooms: [3, 20],
            zIndex: 1000,
            collision: false,
            allowCollision: false,
        });
        layer.add(markers);
        // 图层添加到地图
        map.add(layer);

        var provinces = yiqingChinaData.provinces || [];
        var cityNames = [];
        var specialCity = ['北京', '上海', '天津', '重庆'];
        var colorLegend = {
            // 10: '#fde7a9',
            0: '#f9c02f',
            35: '#f5a54f',
            75: '#f18334',
            115: '#cc5f42',
            150: '#a94d36',
            250: '#792a17',
        };

        // 初始化 labelMarker
        for (var provice of provinces) {
            var cities = provice.cities || [];

            if (specialCity.indexOf(provice.name) !== -1) {
                var totalNumber = 0;
                for (const city of cities) {
                    totalNumber += city.confirmedNum;
                }
                cities = [{
                    name: provice.name,
                    confirmedNum: totalNumber,
                }];
            }
            for (var city of cities) {
                cityNames.push(city.name);
                var curCityData = findInCities(city.name);
                var number = city.confirmedNum;
                if (curCityData && number) {
                    var color = getColorByNumber(number);
                    textStyle.backgroundColor = color;
                    var marker = new AMap.LabelMarker({
                        name: city.name,
                        position: [curCityData.x, curCityData.y],
                        zIndex: number,
                        text: {
                            content: city.name + ': ' + city.confirmedNum,
                            direction: 'center',
                            style: textStyle,
                        }
                    });
                    markers.push(marker);
                }
            }
        }

        layer.add(markers);

        function findInCities(name) {
            for (const city of citiesData) {
                if (name === city.name) {
                    return city;
                }
            }
        }

        function getColorByNumber(number) {
            var color;

            for (var key in colorLegend) {
                if (colorLegend.hasOwnProperty(key)) {
                    if (number < parseInt(key)) {
                        color = colorLegend[key];
                        break;
                    }
                }
            }

            return color;
        }
    </script>
</body>

</html>